<template>
  <ant-modal
    modalWidth="1000"
    modalHeight="600"
    :visible="open"
    :modal-title="formTitle"
    :adjust-size="true"
    :maskClosable="false"
    @cancel="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules" slot="content" layout="vertical">
      <biz-product
        v-if="showProductModal"
        ref="bizProduct"
        @ok="selectProduct"
        @close="showProductModal = false"
      />
      <a-row :gutter="32">
        <a-col :span="12" v-if="form.projectId">
          <a-form-model-item label="项目编号">
            <a-input v-model="form.projectNumber" readOnly/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="订单编号">
            <a-input v-model="form.orderNumber" readOnly v-if="form.id" />
            <a-input v-model="form.orderNumber" placeholder="编号自动生成"  :disabled='true' v-else />
          </a-form-model-item>
        </a-col>
        <a-col :span="12" >
          <a-form-model-item label="客户" prop="customerId">
            <a-select
              placeholder="请选择客户"
              v-model="form.customerId"
              :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body
                }
              "
              style="width: 100%"
              allow-clear
              show-search
              optionFilterProp="children"
            >
              <a-select-option v-for="(d, index) in customerIdOptions" :key="index" :value="d.id">{{ d.customerName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="订单日期" prop="orderDate">
            <a-date-picker
              v-model="form.orderDate"
              valueFormat="YYYY-MM-DD"
              :show-today="true"
              placeholder="选择日期"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="送货地址" prop="address">
            <a-input v-model="form.address" placeholder="请输入送货地址"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="业主电话" prop="phone">
            <a-input v-model="form.phone" placeholder="请输入业主电话"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="安装时间" prop="installDate">
            <a-date-picker
              v-model="form.installDate"
              valueFormat="YYYY-MM-DD"
              :show-today="true"
              placeholder="选择日期"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12" >
          <a-form-model-item label="设计师" prop="biller">
            <select-user
              v-model="form.biller"
              select-model="single"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="开单日期" prop="receiveDate">
            <a-date-picker
              v-model="form.receiveDate"
              valueFormat="YYYY-MM-DD"
              :show-today="true"
              placeholder="选择日期"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12" >
          <a-form-model-item label="清账发货" prop="isSettleSend">
            <a-select
              placeholder="请选择清账发货"
              v-model="form.isSettleSend"
              :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body
                }
              "
              style="width: 100%"
              allow-clear>
              <a-select-option v-for="(d, index) in isSettleSendOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" >
          <a-form-model-item label="订单类型" prop="orderType">
            <a-select
              placeholder="请选择订单类型"
              v-model="form.orderType"
              style="width: 100%"
              allow-clear>
              <a-select-option v-for="(d, index) in orderTypeOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="备注" prop="remark">
            <a-input v-model="form.remark" placeholder="请输入备注"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-model-item label="附件">
            <a-upload
              :headers="headers"
              :file-list="fileList"
              list-type="picture-card"
              :customRequest="handleChange"
              :remove='handleRemove'
            >
                上传
            </a-upload>
          </a-form-model-item>
          <!-- <a-col :span="24">
            <a-card :bordered="false">
              <advance-table
                :loading="loading"
                rowKey="id"
                size="middle"
                :columns="columns"
                :data-source="productList"
                :pagination="false"
                :bordered="true"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
              >
                <div class="table-operations" slot="button" style='margin-bottom:0px;'>
                  <div class="table_title">订单明细</div>
                  <a-button type="primary" @click="handleAddProduct"  >
                    <a-icon type="plus" />新增
                  </a-button>
                  <a-button type="danger" v-if="multiple" @click="handleSubDelete">
                    <a-icon type="delete" />删除
                  </a-button>
                </div>
                  <span slot="numberSlot" slot-scope="{record}">
              <a-input @change='changeNumber(record)' type='number' placeholder="请输入" v-model="record.number" />
            </span>
                <span slot="unitSlot" slot-scope="{record}">
              <a-select
                placeholder="请选择单位"
                v-model="record.unit"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                style="width: 100%"
                allow-clear
                @change='changeUnit(record)'
              >
                <a-select-option v-for="(d, index) in record.unitList" :key="index" :value="d.key">{{ d.name }}</a-select-option>
              </a-select>
            </span>
                <span slot="operation" slot-scope="{record}">
          <a  @click="handleSubDelete(record)" >
            删除
          </a>
        </span>
              </advance-table>
            </a-card>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-card :bordered="false">
              <advance-table
                :loading="loading"
                rowKey="id"
                size="middle"
                :columns="columns2"
                :data-source="materialList"
                :pagination="false"
                :bordered="true"
              >
                <div class="table-operations" slot="button" style='margin-bottom:0px;'>
                  <div class="table_title">配比物料明细</div>
                </div>
                  <span slot="number2Slot" slot-scope="{record}">
              <a-input @change='changeNumber2(record)' type='number' placeholder="请输入" v-model="record.number2" />
            </span>
              </advance-table>
            </a-card>
          </a-col> -->
        </a-col>
      </a-row>

    </a-form-model>
    <template slot="footer">
      <a-button :disabled="disabled" @click="cancel">
        取消
      </a-button>
      <a-button type="primary" :disabled="disabled" @click="submitSupplement(true)" >
        补单
      </a-button>
    </template>
  </ant-modal>
</template>
<script>
import BizOrderForm from './BizOrderForm'
export default {
  ...BizOrderForm
}
</script>
<style lang="less" scoped>
.table-operations, body tr.ant-table-expanded-row:hover .table-operations {
  padding-bottom: 8px;
  text-align: right;
}
.table-operations {
  margin-bottom: 16px;
}
.table-operations > button,
.table-operations .ant-input-affix-wrapper{
  margin-right: 8px;
}
.table_title {
  float: left;
  padding-left: 8px;
  font-weight: 600;
  color: #222222;
  line-height: 30px;
}
</style>
